<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app">
    用户输入内容： <input type="text"  v-model="username"/><br>
    <button @Click="destroyed">销毁</button>
</div>
<script src="../js/vue.js"></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: ''
        },
        //生命周期函数直接调用
        methods: {
            destroyed(){
                //销毁vue对象
                this.$destroy()
            }
        },
        //在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
        beforeCreate(){
            console.log('初始化之后调用-beforeCreate')
        },
        //在实例创建完成后被立即调用。在这一步，实例已完成以下的配置
        created(){
            console.log('实例化对象完成,并且完成了配置之后调用created')
        },
        //在挂载开始之前被调用：相关的 render 函数首次被调用。
        //例如#app被挂载前
        beforeMount(){
            console.log('数据在备挂载前调用beforeMount')
        },
        //实例被挂载后调用 页面真正的加载完成之后调用
        mounted(){
            console.log("页面加载完成mounted")
        },
        //数据更新时调用，发生在虚拟 DOM 打补丁之前
        beforeUpdate(){
            console.log("数据更新时调用beforeUpdate")
        },
        //数据更新时调用，发生在虚拟 DOM 打补丁之前
        beforeUpdate(){
            console.log("数据更新时调用beforeUpdate")
        },
        //由于数据更改之后调用
        updated(){
            console.log("数据修改之后调用updated")
        },
        //实例销毁之前调用。在这一步，实例仍然完全可用。
        beforeDestroy(){
            console.log("VUE对象销毁之前调用beforeDestroy")
        },
        //实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
        destroyed(){
            console.log("实例销毁后调用destroyed")
        }
    })
</script>
</body>
</html>